<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        font: 16px/1.5"Helvetica Neue", Arial, sans-serif;
        text-align: center;
    }
    /* The wrapper */
    .b-block {
        position: relative;
        display: inline-block;
        overflow: hidden;
        width: 10em;
        height: 10em;
        vertical-align: middle;
        -webkit-transform: translateZ(0);
    }
    /* The blocks that would be hovered */
    .b-block__hoverer {
        position: absolute;
        z-index: 1;
        width: 71%;
        height: 71%;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    /* Positioning for hoverers */
    .b-block__hoverer:nth-child(1) {
        top: 0;
        right: 0;
        -webkit-transform-origin: 100% 0;
        -moz-transform-origin: 100% 0;
        -o-transform-origin: 100% 0;
        transform-origin: 100% 0;
    }
    .b-block__hoverer:nth-child(2) {
        bottom: 0;
        right: 0;
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }
    .b-block__hoverer:nth-child(3) {
        bottom: 0;
        left: 0;
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    .b-block__hoverer:nth-child(4) {
        top: 0;
        left: 0;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    /* Enlarge the hoverer to cover the whole area */
    .b-block__hoverer:hover {
        z-index: 9;
        width: 100%;
        height: 100%;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none;
    }
    /* Styles for content block */
    .b-block__content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 10em;
        background: #333;
        color: #FFF;
        /* Restore the antialiasing lost from translateZ */
        -webkit-font-smoothing: subpixel-antialiased;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
        -webkit-box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
        -moz-box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
        box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
    }
    /* Move the content block while hovering different blocks */
    .b-block__hoverer:nth-child(1):hover ~ .b-block__content {
        -webkit-transform: translate(0, 100%);
        -moz-transform: translate(0, 100%);
        -o-transform: translate(0, 100%);
        transform: translate(0, 100%);
    }
    .b-block__hoverer:nth-child(2):hover ~ .b-block__content {
        -webkit-transform: translate(-100%, 0);
        -moz-transform: translate(-100%, 0);
        -o-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
    }
    .b-block__hoverer:nth-child(3):hover ~ .b-block__content {
        -webkit-transform: translate(0, -100%);
        -moz-transform: translate(0, -100%);
        -o-transform: translate(0, -100%);
        transform: translate(0, -100%);
    }
    .b-block__hoverer:nth-child(4):hover ~ .b-block__content {
        -webkit-transform: translate(100%, 0);
        -moz-transform: translate(100%, 0);
        -o-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }
    </style>
</head>

<body>
    <p>Try to hover this block from different directions</p>
    <p>↓</p>
    <span>→</span>
    <div class="b-block">
        <div class="b-block__hoverer"></div>
        <div class="b-block__hoverer"></div>
        <div class="b-block__hoverer"></div>
        <div class="b-block__hoverer"></div>

        <div class="b-block__content">
            Hover me!
        </div>
    </div>
    <span>←</span>
    <p>↑</p>

</body>

</html>
